import React from 'react';
import PropTypes from 'prop-types';

import { format } from 'd3-format';
import { timeFormat } from 'd3-time-format';

import { ChartCanvas, Chart } from 'react-stockcharts';
import {
  BarSeries,
  AreaSeries,
  CandlestickSeries,
  LineSeries,
  MACDSeries,
} from 'react-stockcharts/lib/series';
import { XAxis, YAxis } from 'react-stockcharts/lib/axes';
import {
  CrossHairCursor,
  EdgeIndicator,
  CurrentCoordinate,
  MouseCoordinateX,
  MouseCoordinateY,
} from 'react-stockcharts/lib/coordinates';

import { discontinuousTimeScaleProvider } from 'react-stockcharts/lib/scale';
import {
  OHLCTooltip,
  MovingAverageTooltip,
  MACDTooltip,
} from 'react-stockcharts/lib/tooltip';
import { ema, macd, sma } from 'react-stockcharts/lib/indicator';
import { fitWidth } from 'react-stockcharts/lib/helper';
import { connect } from 'dva';

const macdAppearance = {
  stroke: {
    macd: '#FF0000',
    signal: '#00F300',
  },
  fill: {
    divergence: '#4682B4',
  },
};

const mouseEdgeAppearance = {
  textFill: '#542605',
  stroke: '#05233B',
  strokeOpacity: 1,
  strokeWidth: 3,
  arrowWidth: 5,
  fill: '#BCDEFA',
};

@connect(({ stockCandle, loading }) => ({
  stockCandle,
  loading: loading.effects['stockCandle/queryMonitorInfo'],
}))
class CandleStickChartWithMACDIndicator extends React.Component {

  componentDidMount = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'stockCandle/queryMonitorInfo',
    });
  };

  render(){

    console.log("this.props.stockCandle= ", this.props.stockCandle)

    if(!this.props.stockCandle.data){
      return <div>loading</div>
    }

    const { type,  width, ratio } = this.props;
    const {data:initialData } = this.props.stockCandle

    const ema26 = ema()
      .id(0)
      .options({ windowSize: 26 })
      .merge((d, c) => {
        d.ema26 = c;
      })
      .accessor(d => d.ema26);

    const ema12 = ema()
      .id(1)
      .options({ windowSize: 12 })
      .merge((d, c) => {
        d.ema12 = c;
      })
      .accessor(d => d.ema12);

    const macdCalculator = macd()
      .options({
        fast: 12,
        slow: 26,
        signal: 9,
      })
      .merge((d, c) => {
        d.macd = c;
      })
      .accessor(d => d.macd);

    const smaVolume50 = sma()
      .id(3)
      .options({
        windowSize: 50,
        sourcePath: 'volume',
      })
      .merge((d, c) => {
        d.smaVolume50 = c;
      })
      .accessor(d => d.smaVolume50);

    const calculatedData = smaVolume50(macdCalculator(ema12(ema26(initialData))));
    const xScaleProvider = discontinuousTimeScaleProvider
      .inputDateAccessor(d => d.date);
    const {
      data,
      xScale,
      xAccessor,
      displayXAccessor,
    } = xScaleProvider(calculatedData);

    return (
      <ChartCanvas height={600}
                   width={width}
                   ratio={ratio}
                   margin={{ left: 70, right: 70, top: 20, bottom: 30 }}
                   type={type}
                   seriesName="MSFT"
                   data={data}
                   xScale={xScale}
                   xAccessor={xAccessor}
                   displayXAccessor={displayXAccessor}
      >
        <Chart id={1} height={400}
               yExtents={[d => [d.high, d.low], ema26.accessor(), ema12.accessor()]}
               padding={{ top: 10, bottom: 20 }}
        >
          <XAxis axisAt="bottom" orient="bottom" showTicks={false} outerTickSize={0}/>
          <YAxis axisAt="right" orient="right" ticks={5}/>

          <MouseCoordinateY
            at="right"
            orient="right"
            displayFormat={format('.2f')}
            {...mouseEdgeAppearance}
          />

          <CandlestickSeries/>
          <LineSeries yAccessor={ema26.accessor()} stroke={ema26.stroke()}/>
          <LineSeries yAccessor={ema12.accessor()} stroke={ema12.stroke()}/>

          <CurrentCoordinate yAccessor={ema26.accessor()} fill={ema26.stroke()}/>
          <CurrentCoordinate yAccessor={ema12.accessor()} fill={ema12.stroke()}/>

          <EdgeIndicator itemType="last" orient="right" edgeAt="right"
                         yAccessor={d => d.close}
                         fill={d => d.close > d.open ? '#A2F5BF' : '#F9ACAA'}
                         stroke={d => d.close > d.open ? '#0B4228' : '#6A1B19'}
                         textFill={d => d.close > d.open ? '#0B4228' : '#420806'}
                         strokeOpacity={1}
                         strokeWidth={3}
                         arrowWidth={2}
          />

          <OHLCTooltip origin={[-40, 0]}/>
          <MovingAverageTooltip
            onClick={e => console.log(e)}
            origin={[-38, 15]}
            options={[
              {
                yAccessor: ema26.accessor(),
                type: 'EMA',
                stroke: ema26.stroke(),
                windowSize: ema26.options().windowSize,
              },
              {
                yAccessor: ema12.accessor(),
                type: 'EMA',
                stroke: ema12.stroke(),
                windowSize: ema12.options().windowSize,
              },
            ]}
          />
        </Chart>
        <Chart id={2} height={150}
               yExtents={[d => d.volume, smaVolume50.accessor()]}
               origin={(w, h) => [0, h - 300]}
        >
          <YAxis axisAt="left" orient="left" ticks={5} tickFormat={format('.2s')}/>

          <MouseCoordinateY
            at="left"
            orient="left"
            displayFormat={format('.4s')}
            {...mouseEdgeAppearance}
          />

          <BarSeries yAccessor={d => d.volume} fill={d => d.close > d.open ? '#6BA583' : '#FF0000'}/>
          <AreaSeries yAccessor={smaVolume50.accessor()} stroke={smaVolume50.stroke()} fill={smaVolume50.fill()}/>
        </Chart>
        <Chart id={3} height={150}
               yExtents={macdCalculator.accessor()}
               origin={(w, h) => [0, h - 150]} padding={{ top: 10, bottom: 10 }}
        >
          <XAxis axisAt="bottom" orient="bottom"/>
          <YAxis axisAt="right" orient="right" ticks={2}/>

          <MouseCoordinateX
            at="bottom"
            orient="bottom"
            displayFormat={timeFormat('%Y-%m-%d')}
            rectRadius={5}
            {...mouseEdgeAppearance}
          />
          <MouseCoordinateY
            at="right"
            orient="right"
            displayFormat={format('.2f')}
            {...mouseEdgeAppearance}
          />

          <MACDSeries yAccessor={d => d.macd}
                      {...macdAppearance} />
          <MACDTooltip
            origin={[-38, 15]}
            yAccessor={d => d.macd}
            options={macdCalculator.options()}
            appearance={macdAppearance}
          />
        </Chart>
        <CrossHairCursor/>
      </ChartCanvas>
    );
  }
}

// CandleStickChartWithMACDIndicator.propTypes = {
//   data: PropTypes.array.isRequired,
//   width: PropTypes.number.isRequired,
//   ratio: PropTypes.number.isRequired,
//   type: PropTypes.oneOf(['svg', 'hybrid']).isRequired,
// };

CandleStickChartWithMACDIndicator.defaultProps = {
  type: 'svg',
};

CandleStickChartWithMACDIndicator = fitWidth(CandleStickChartWithMACDIndicator);

export default CandleStickChartWithMACDIndicator;
